<script setup>
  import { reactive, ref, watch } from 'vue'
  import { useUserStore } from '@/stores/counter';
  import {setMyPassword} from "@/api/user.js"

  const userStore = useUserStore()

  const uId = userStore.userMsg.uId;
  const token = userStore.userMsg.token;

  const props = defineProps({dialogFormVisible:{}})
  const emits = defineEmits(["isShow"])

  const dFVisible = ref(props.dialogFormVisible);
  const passwordData = reactive({
    oPassword:"",
    nPassword:"",
    token, uId
  });

  watch(()=>props.dialogFormVisible, (val)=>{
    dFVisible.value = val;
  })

  // 关闭按钮
  function cancel(){
    dFVisible.value = false;
    close();
  }
  // 提交按钮
  function submit(){
    dFVisible.value = false;
    
    setMyPassword(passwordData).then(res=>{
      if(res.data.code === 3){
        ElMessage({
          message:"密码修改成功，请重新登录",
          onClose(){
            // 持久化存储状态
            localStorage.removeItem("userMsg");
            // 修改状态管理器中的用户信息状态
            userStore.change_userMsg( null );

            close();
          }
        })
      }else{
        ElMessage({
          message:res.data.msg
        })
      }
    })

  }
  // 点击空白，点击右上角x，按键盘esc键
  function close(){
    emits("isShow", false);
    passwordData.oPassword = "";
    passwordData.nPassword = "";
  }
</script>
<template>
    <el-dialog v-model="dFVisible" title="Shipping address" :before-close="close">
      <el-form :model="passwordData">
        <el-form-item label="原密码">
          <el-input v-model="passwordData.oPassword"/>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordData.nPassword"/>
        </el-form-item>
        <p>要修改的原信息：{{ passwordData }}</p>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>

  <style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  </style>
  